'use client'

import Image from 'next/image'
import { Tab } from '@headlessui/react'
import { Inbox, Ear, MessagesSquare } from 'lucide-react'
import clsx from 'clsx'
import S1 from '@/images/s-1.png'
import S2 from '@/images/s-2.png'
import S3 from '@/images/s-3.png'

const features = [
  {
    name: '1. Create a Project',
    description: 'Sign in RedGrowth. Easily set up your project in minutes and get ready to start monitoring.',
    image: S1,
    icon: Inbox,
  },
  {
    name: '2. Set Up Keywords',
    description:
      'Identify the keywords and phrases relevant to your product. Our AI will track these keywords to find relevant posts and discussions.',
    image: S2,
    icon: Ear,
  },
  {
    name: '3. Generate Replies',
    description:
      'Sit back and relax as our AI monitors the keywords and automatically generate replies to relevant posts with tailored responses, ensuring your product stays engaged in key conversations.',
    image: S3,
    icon: MessagesSquare,
  },
]

function Feature({ feature, isActive, className, ...props }) {
  return (
    <div className={clsx(className, !isActive && 'opacity-75 hover:opacity-100')} {...props}>
      <h3 className={clsx('mt-6 text-sm font-medium flex', isActive ? 'text-primary' : 'text-slate-600')}>
        <feature.icon className="mr-2 h-6 w-6" />
      </h3>
      <p className={clsx('mt-2 font-display text-xl', isActive ? 'text-primary' : 'text-slate-900')}>{feature.name}</p>
      <p className="mt-4 text-sm text-slate-600">{feature.description}</p>
    </div>
  )
}

function FeaturesMobile() {
  return (
    <div className="-mx-4 mt-10 flex flex-col gap-y-10 overflow-hidden px-4 sm:-mx-6 sm:px-6 lg:hidden">
      {features.map(feature => (
        <div key={feature.name}>
          <Feature feature={feature} className="mx-auto max-w-2xl" isActive />
          <div className="relative mt-10 pb-10">
            <div className="absolute -inset-x-4 bottom-0 top-8 bg-slate-200 sm:-inset-x-6" />
            <div className="relative mx-auto w-[52.75rem] overflow-hidden rounded-xl bg-white shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10">
              <Image className="w-full" src={feature.image} alt="" sizes="52.75rem" />
            </div>
          </div>
        </div>
      ))}
    </div>
  )
}

function FeaturesDesktop() {
  return (
    <Tab.Group as="div" className="hidden lg:mt-10 lg:block">
      {({ selectedIndex }) => (
        <>
          <Tab.List className="grid grid-cols-3 gap-x-8">
            {features.map((feature, featureIndex) => (
              <Feature
                key={feature.name}
                feature={{
                  ...feature,
                  name: (
                    <Tab className="ui-not-focus-visible:outline-none">
                      <span className="absolute inset-0" />
                      {feature.name}
                    </Tab>
                  ),
                }}
                isActive={featureIndex === selectedIndex}
                className="relative"
              />
            ))}
          </Tab.List>
          <Tab.Panels className="relative mt-20 overflow-hidden rounded-4xl bg-slate-200 px-14 py-16 xl:px-16">
            <div className="-mx-5 flex">
              {features.map((feature, featureIndex) => (
                <Tab.Panel
                  static
                  key={feature.summary}
                  className={clsx(
                    'px-5 transition duration-500 ease-in-out ui-not-focus-visible:outline-none',
                    featureIndex !== selectedIndex && 'opacity-60'
                  )}
                  style={{ transform: `translateX(-${selectedIndex * 100}%)` }}
                  aria-hidden={featureIndex !== selectedIndex}
                >
                  <div className="w-[52.75rem] overflow-hidden rounded-xl bg-white shadow-lg shadow-slate-900/5 ring-1 ring-slate-500/10">
                    <Image className="w-full" src={feature.image} alt="" sizes="52.75rem" />
                  </div>
                </Tab.Panel>
              ))}
            </div>
            <div className="pointer-events-none absolute inset-0 rounded-4xl ring-1 ring-inset ring-slate-900/10" />
          </Tab.Panels>
        </>
      )}
    </Tab.Group>
  )
}

export default function Wrok() {
  return (
    <div className="bg-white">
      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-2xl md:text-center">
          <h2 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">How it works</h2>
        </div>
        <FeaturesMobile />
        <FeaturesDesktop />
      </div>
    </div>
  )
}
